import React from 'react';
import { PropTypes } from 'prop-types';
import { observer } from 'mobx-react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { user } from '../store';

@observer
class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this._handleBtnPress = this._handleBtnPress.bind(this);
  }

  static propTypes = {
    navigation: PropTypes.object.isRequired
  };

  static navigationOptions = {
    title: 'Home'
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <Text>Price: {user.price}</Text>
        <Text>Amount: {user.amount}</Text>
        <Text>Total: {user.total}</Text>
        <Button title="Go to Details" onPress={this._handleBtnPress} />
      </View>
    );
  }

  _handleBtnPress() {
    user.add();
    this.props.navigation.navigate('Details');
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const HomeStack = StackNavigator({
  Home: { screen: HomeScreen }
});

export default HomeStack;
